<template>
	<view>
		<Navbar></Navbar>
		<view class="content" :style="{height: gloryHeight + 'px'}">
			<view class="glory_box" :style="{height: gloryHeight + 'px'}">
				<!-- <view class="glory_content" v-if="gloryType == 1">
					<view class="user">
						<image class="user_head" :src="gloryData.userInfo.head_img"></image>
						<view class="user_name">{{gloryData.userInfo.name}}</view>
					</view>
					<view class="qrcode_img">
						<u-image :src="gloryData.qrcode" mode="widthFix"></u-image>
					</view>
				</view> -->
				<u-image :src="gloryUrl" mode="aspectFit" height="100%" v-if="gloryType == 1"></u-image>
			</view>
		</view>
		<view class="u-m-t-20 u-font-40 u-font-bold u-text-center">长按图片分享海报</view>
		<!-- <Bottom id="bottom" :btnText="btnText" @confirm="onConfirm"></Bottom> -->
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import {
		teaTempShare,
		teaShareQrcode
	} from '@/network/tea.js'
	import {
		InitScene
	} from '@/utils/index.js'
	export default {
		components: {
			Navbar,
			Bottom
		},
		data() {
			return {
				gloryData: {},
				gloryHeight: 0,
				btnText: '分享海报',
				gloryType: 1,
				gloryUrl: ''
			}
		},
		async onLoad(options) {
			await this.$onLaunched
			this.onCheckUser()
			options = InitScene(options.scene)
			if (options.type == 2) {
				this.gloryType = 2
				this.onGetInviteGlory(options.inviterId)
				this.btnText = '马上支持'
			} else {
				this.gloryType = 1
				this.onGetGloryData()
			}
			this.onGetStickyTop()
		},
		methods: {
			onCheckUser() {
				const userStauts = uni.getStorageSync("user_status")
				if (userStauts == 0) {
					uni.redirectTo({
						url: "/pages/register/register"
					})
				}
			},
			onGetInviteGlory(id) {
				teaShareQrcode({
					user_id: id
				}).then(res => {
					this.gloryUrl = res.data.url
				})
			},
			async onGetGloryData() {
				let userId = uni.getStorageSync("user_id")
				/* const res = await teaTempShare({user_id: userId})
				this.gloryData = res.data */
				const qrcode = await teaShareQrcode({user_id: userId})
				this.gloryUrl = qrcode.data.url
			},
			onGetStickyTop() {
				const _this = this
				uni.getSystemInfo({
					success: (res) => {
						const statusBarHeight = res.statusBarHeight || 0;
						const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
						const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) *
							2;

						uni.createSelectorQuery().in(this).select("#bottom").boundingClientRect(data => {
							// _this.gloryHeight = res.screenHeight - res.statusBarHeight - navBarHeight - data.bottom
							_this.gloryHeight = res.screenHeight - res.statusBarHeight - navBarHeight - 78
						}).exec()
					},
					fail: (err) => {}
				})
			},
			onConfirm() {
				if (this.gloryType == 1) {
					uni
					const _this = this
					uni.downloadFile({
						url: _this.gloryUrl,
						success: function(res) {
							const filePath = res.tempFilePath;
							uni.showLoading({
								title: '保存中',
								mask: true
							})
							uni.saveImageToPhotosAlbum({
								filePath: filePath,
								success(res) {
									uni.hideLoading()
									uni.showToast({
										title: "保存成功",
										icon: "success"
									})
								},
								fail(err){
									uni.hideLoading()
								}
							})
						},
						fail: function(err) {
							uni.hideLoading()
						}
					});
				} else {
					getApp().globalData.switchCustom = true
					uni.switchTab({
						url: "/pages/home/home"
					})
				}
			}
		}
	}
</script>

<style scoped>
	.content {
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}

	.glory_box {
		width: 100%;
		border-radius: 20rpx;
		/* background-image: url('https://lrcj.oss-cn-shenzhen.aliyuncs.com/images/common/20240926479275256840.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
	}

	.glory_content {
		position: absolute;
		width: 60%;
		margin: 0 20% 0 11%;
		top: 63%
	}

	.glory_content .user {
		display: flex;
		align-items: center;
	}

	.glory_content .user_head {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		margin-right: 12rpx;
	}

	.glory_content .user_name {
		font-size: 34rpx;
		color: #31396A;
		font-weight: bold;
	}

	.glory_content .desc {
		margin-top: 20rpx;
		line-height: 1.7;
		color: #9297A5;
		font-weight: 500;
		font-size: 28rpx;
	}

	.glory_content .qrcode {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.glory_content .qrcode_desc {
		color: #B59F8D;
		font-size: 28rpx;
	}

	.glory_content .qrcode_date {
		color: #B59F8D;
		font-size: 28rpx;
		margin-top: 8rpx;
	}

	.glory_content .qrcode_img {
		width: 40%;
		margin: 30% 0% 0 86%;
	}
</style>